// 水晶冲突地图数据
const crystalMaps = [
    { name: "角力学校", short: "角力", bgClass: "crystal-0", icon: "fas fa-graduation-cap" },
    { name: "火山之心", short: "火山", bgClass: "crystal-1", icon: "fas fa-volcano" },
    { name: "机关大殿", short: "机关", bgClass: "crystal-2", icon: "fas fa-cogs" },
    { name: "角力学校", short: "角力", bgClass: "crystal-0", icon: "fas fa-graduation-cap" },
    { name: "九霄云上", short: "九霄", bgClass: "crystal-3", icon: "fas fa-cloud" },
    { name: "赤土红沙", short: "赤土", bgClass: "crystal-4", icon: "fas fa-mountain" }
];

// 基准时间点：2025年7月19日14:00，角力学校（循环位置1）
const crystalBaseTime = new Date(2025, 6, 19, 14, 0, 0); // 月份从0开始
const crystalBaseIndex = 0; // 角力学校在数组中的索引

// 每90分钟轮换一次（90 * 60 * 1000 毫秒）
const CRYSTAL_ROTATION_INTERVAL = 90 * 60 * 1000;

// 计算当前水晶冲突地图索引
function getCurrentCrystalMapIndex(targetTime = new Date()) {
    const timeDiff = targetTime.getTime() - crystalBaseTime.getTime();
    const rotationsPassed = Math.floor(timeDiff / CRYSTAL_ROTATION_INTERVAL);
    return (crystalBaseIndex + rotationsPassed) % crystalMaps.length;
}

// 获取指定时间的地图数据
function getCrystalMapData(time) {
    const index = getCurrentCrystalMapIndex(time);
    return {
        ...crystalMaps[index],
        index: index
    };
}

// 获取下次轮换时间
function getNextRotationTime(currentTime = new Date()) {
    const timeDiff = currentTime.getTime() - crystalBaseTime.getTime();
    const rotationsPassed = Math.floor(timeDiff / CRYSTAL_ROTATION_INTERVAL);
    const nextRotationTime = new Date(crystalBaseTime.getTime() + (rotationsPassed + 1) * CRYSTAL_ROTATION_INTERVAL);
    return nextRotationTime;
}

// 渲染水晶冲突信息
function renderCrystalConflict() {
    const now = new Date();
    const currentMap = getCrystalMapData(now);
    const nextRotationTime = getNextRotationTime(now);
    
    // 计算剩余时间
    const timeRemaining = nextRotationTime.getTime() - now.getTime();
    const minutesRemaining = Math.floor(timeRemaining / (60 * 1000));
    const secondsRemaining = Math.floor((timeRemaining % (60 * 1000)) / 1000);
    
    const crystalDateTime = document.getElementById('crystal-date-time');
    const crystalTimeline = document.getElementById('crystal-timeline');
    
    if (crystalDateTime) {
        crystalDateTime.innerHTML = `
            <p>当前时间: <strong>${formatTime(now)} (GMT+8)</strong></p>
            <p>剩余时间: <strong>${minutesRemaining}分${secondsRemaining}秒</strong></p>
            <p>下次轮换: <strong>${formatTime(nextRotationTime)}</strong></p>
        `;
    }
    
    // 渲染时间轴
    if (crystalTimeline) {
        renderCrystalTimeline(now);
    }
}

// 渲染水晶冲突时间轴
function renderCrystalTimeline(currentTime) {
    const timeline = document.getElementById('crystal-timeline');
    if (!timeline) return;
    
    const currentIndex = getCurrentCrystalMapIndex(currentTime);
    const nextRotationTime = getNextRotationTime(currentTime);
    
    // 获取当前和后续5个地图，总共6个
    const timelineItems = [];
    for (let i = 0; i < 6; i++) {
        const mapIndex = (currentIndex + i) % crystalMaps.length;
        const map = crystalMaps[mapIndex];
        const rotationTime = new Date(nextRotationTime.getTime() + (i - 1) * CRYSTAL_ROTATION_INTERVAL);
        
        timelineItems.push({
            map: map,
            time: rotationTime,
            isCurrent: i === 0
        });
    }
    
    // 创建2行每行3个的布局
    let timelineHTML = '<div class="timeline-grid">';
    for (let row = 0; row < 2; row++) {
        timelineHTML += '<div class="timeline-row">';
        for (let col = 0; col < 3; col++) {
            const index = row * 3 + col;
            const item = timelineItems[index];
            timelineHTML += `
                <div class="timeline-item ${item.isCurrent ? 'current' : ''}">
                    <div class="timeline-icon">
                        <i class="${item.map.icon}"></i>
                    </div>
                    <div class="timeline-map ${item.map.bgClass}">${item.map.name}</div>
                    <div class="timeline-time">${formatTime(item.time)}</div>
                </div>
            `;
        }
        timelineHTML += '</div>';
    }
    timelineHTML += '</div>';
    
    timeline.innerHTML = timelineHTML;
}

// 格式化时间（复用现有函数或重新定义）
function formatTime(date) {
    return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
}

// 初始化水晶冲突模块
function initCrystalConflict() {
    // 如果页面中存在水晶冲突相关元素，则开始渲染
    if (document.getElementById('crystal-timeline')) {
        renderCrystalConflict();
        // 每秒更新一次
        setInterval(renderCrystalConflict, 1000);
    }
}

// 当DOM加载完成后初始化
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initCrystalConflict);
} else {
    initCrystalConflict();
}
